<template>
  <div class="info-container">
    <div class="info-total">
      <div class="info-total-card" v-for="(item, index) in totalOptions" :key="index">
        <div class="info-total-title">{{ item.name }}</div>
        <div class="info-total-body">
          <div class="info-total-icon">
            <component :is="item.icon" :style="{ fontSize: '20px', color: '#1677ff' }" />
          </div>
          <div class="info-total-value">{{ systemInfo[item.prop] }}</div>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="info-head">
        <div class="info-title">基础信息</div>
        <div class="info-tips">{{ systemInfo.version }}</div>
        <div class="info-button">
          <!-- <el-button class="el-button" size="small" type="primary"> 手动更新 </el-button> -->
          <!-- <el-checkbox v-model="isRefresh">是否开启自动更新</el-checkbox> -->
        </div>
      </div>
      <div class="info-card">
        <div class="info-item">
          <div class="info-label">主系统状态：</div>
          <!-- 标签 -->
          <div class="info-span info-tag">
            <a-tag :bordered="false" color="processing">{{ systemInfo.systemState ? '运行中' : '停止' }}</a-tag>
          </div>
        </div>
        <div class="info-item" v-for="item in options" :key="item.prop">
          <div class="info-label">{{ item.name }}：</div>
          <!-- 进度 -->
          <div class="info-span info-progress" v-if="item.type === 'progress'">
            <div class="info-progress-icon">
              <a-progress :percent="getPercent(formData[item.prop], formData[item.total])" :show-info="false" />
            </div>
            <div class="info-progress-number">{{ formData[item.prop] }}{{ item.util }} / {{ formData[item.total] }}{{ item.util }}</div>
          </div>
          <!-- 标签 -->
          <div class="info-span info-tag" v-else-if="item.type === 'tag'">
            <a-tag :bordered="false" color="processing">{{ formData[item.prop] }}</a-tag>
          </div>
          <!-- format -->
          <div class="info-span" v-else-if="item.type === 'format'">{{ item.format(formData) }}</div>
          <!-- 普通 -->
          <div class="info-span" v-else>{{ formData[item.prop] }} {{ item.util }}</div>
        </div>
      </div>
    </div>
    <div class="info-content" v-if="false">
      <div class="info-head">
        <div class="info-title">更多</div>
        <div class="info-button">
          <!-- <el-button class="el-button" size="small" type="primary"> 手动更新 </el-button> -->
          <!-- <el-checkbox v-model="isRefresh">是否开启自动更新</el-checkbox> -->
        </div>
      </div>
      <div class="info-card">
        <div class="info-item" v-for="item in moreOptions" :key="item.prop">
          <div class="info-label">{{ item.name }}：</div>
          <div class="info-span">{{ moreFormData[item.prop] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { iotApi } from '/@/api/business/iotSystem/index.js';
  import { formatTime, dateFormat } from '/@/utils/date.js';
  export default {
    data() {
      return {
        isRefresh: true,
        options: [
          {
            name: 'CPU 数量',
            prop: 'systemCpuCount',
          },
          {
            name: '系统 CPU 使用率',
            prop: 'systemCpuUsage',
            type: 'format',
            format: (row) => {
              return (row.systemCpuUsage * 100).toFixed(2) + ' %';
            },
          },
          {
            name: '当前应用 CPU 使用率',
            prop: 'processCpuUsage',
            type: 'format',
            format: (row) => {
              return (row.processCpuUsage * 100).toFixed(2) + ' %';
            },
          },
          {
            name: '应用启动时间点',
            prop: 'processStartTime',
            type: 'format',
            format: (row) => {
              return dateFormat(row.processStartTime * 1000);
            },
          },
          {
            name: '应用已运行时间',
            prop: 'processUptime',
            type: 'format',
            format: (row) => {
              return formatTime(row.processUptime, ['小时', '分', '秒']);
            },
          },
          {
            name: '系统总内存',
            prop: 'systemMemoryTotal',
            util: 'MB',
          },
          {
            name: '系统可用内存',
            prop: 'systemMemoryAvailable',
            util: 'MB',
          },
          {
            name: '内存使用情况',
            prop: 'jvmMemoryUsed',
            util: 'MB',
          },
          {
            name: '磁盘可用空间',
            prop: 'diskFree',
            type: 'progress',
            total: 'diskTotal', // 磁盘总空间
            util: 'GB',
          },
        ],
        formData: {
          systemCpuCount: 0,
          systemCpuUsage: 0,
          processCpuUsage: 0,
          processStartTime: 0,
          processUptime: 0,
          systemMemoryTotal: 0,
          systemMemoryAvailable: 0,
          jvmMemoryUsed: 0,
          diskTotal: 0,
          diskFree: 0,
        },
        moreOptions: [
          {
            name: '日志推送状态',
            prop: 'logStatus',
          },
          {
            name: '监控推送状态',
            prop: 'jiankongStatus',
          },
          {
            name: '告警推送状态',
            prop: 'alarmStatus',
          },
        ],
        moreFormData: {
          logStatus: '停止',
          jiankongStatus: '停止',
          alarmStatus: '停止',
        },
        systemInfo: {
          version: 0,
          systemState: false,
          pluginCount: 0,
          deviceCount: 0,
          appCount: 0,
          ruleCount: 0,
          funCount: 0,
        },
        totalOptions: [
          {
            name: '总插件数量',
            prop: 'pluginCount',
            icon: 'ApiOutlined',
          },
          {
            name: '南向设备数量',
            prop: 'deviceCount',
            icon: 'AppstoreAddOutlined',
          },
          {
            name: '北向应用数量',
            prop: 'appCount',
            icon: 'AndroidOutlined',
          },
          {
            name: '总规则数量',
            prop: 'ruleCount',
            icon: 'ContainerOutlined',
          },
          {
            name: '总函数数量',
            prop: 'funCount',
            icon: 'FunctionOutlined',
          },
        ],
      };
    },
    methods: {
      getPercent(data, total) {
        return Math.ceil(((total - data) / total) * 100);
      },
      getMetrics() {
        iotApi.getMetrics().then(({ data }) => {
          this.formData = data;
        });
      },
      getSystemInfo() {
        iotApi.getSystemInfo().then(({ data }) => {
          this.systemInfo = data;
        });
      },
    },
    mounted() {
      this.getMetrics();
      this.getSystemInfo();
    },
  };
</script>

<style scoped lang="less">
  .info-container {
    .info-total {
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      .info-total-card {
        width: calc((100% / 5) - 20px);
        padding: 15px;
        background-color: #fff;
        box-shadow:
          0 1px 2px 0 rgba(0, 0, 0, 0.03),
          0 1px 6px -1px rgba(0, 0, 0, 0.02),
          0 2px 4px 0 rgba(0, 0, 0, 0.02);
        border-radius: 8px;
        .info-total-title {
          font-size: 14px;
          color: #666;
        }
        .info-total-body {
          margin-top: 15px;
          display: flex;
          align-items: center;
          .info-total-value {
            margin-left: 15px;
            font-size: 24px;
            color: #1677ff;
          }
        }
      }
    }
    .info-content {
      padding: 15px;
      background-color: #fff;
      box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.03),
        0 1px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px 0 rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      margin-bottom: 20px;
      .info-head {
        display: flex;
        align-items: center;
        .info-title {
          font-weight: 700;
          margin-right: 15px;
          font-size: 16px;
        }
        .info-tips {
          padding: 2px 15px;
          border-radius: 20px;
          background-color: #ddd;
          color: #666;
        }
        .info-button {
          margin-left: 50px;
        }
      }
      .info-card {
        max-width: 700px;
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px #ddd;
        margin-top: 20px;
        .info-item {
          margin: 10px 0;
          display: grid;
          grid-template-columns: 170px 1fr;
          grid-column-gap: 10px;
          line-height: 30px;
          .info-label {
            font-weight: 700;
            text-align: right;
          }
          .info-span {
            color: #666;
          }
          .info-progress {
            display: flex;
            justify-content: space-between;
            .info-progress-icon {
              flex: 1;
            }
            .info-progress-number {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
  .el-button {
    margin-right: 15px;
  }
</style>
